<script setup>

import {onMounted, onUpdated, ref} from "vue";
import {Refresh, Search} from "@element-plus/icons-vue";
import axios from "axios";
import {charAt} from "core-js/internals/string-multibyte";

// 模糊查询条件
let name=ref()
let parentName=ref()

// 数据编号
let num=ref()

const formLabelWidth = '140px'
let dialogFormVisibleAdd =ref(false)
let dialogFormVisibleUpd =ref(false)
let dialogFormVisibleDel =ref(false)



//判断修改框和添加框
let str1=ref("")
let str2=ref("添加新类型")
// 判断删除和批量删除框
let str3=ref("")
let str4=ref("确定删除该条数据吗?")



let tableData=ref([])

//一级类型数组
let typeArr1=ref([])
//类型图片数组
let iconArr=ref([])
//批量删除数据数组
let numArr=ref([])

//表单
let form=ref({

  typeId:0,
  name:"",
  iconUrl:"",
  parentTypeId:0,
  parentName:""

})

//添加新类型
const add=()=>{
  for (const type of typeArr1.value) {
    if (type.name===form.value.parentName){
      form.value.parentTypeId=type.typeId
    }
  }
  axios.post("/coursetype",form.value,{
    headers:{"Content-Type":"application/x-www-form-urlencoded"}
  })
      .then(res=>{
        console.log(res.data)
        findAll()
        findParent()
      })
      .catch(err=>console.log(err))
}
const addCourseType1=()=>{
  str1.value="添加新类型"
  form.value={}
  dialogFormVisibleAdd.value=true;
}
const addCourseType2=()=>{

  let file=document.getElementById("tx");
  if (file.files.length>0){
    const formData=new FormData();
    formData.append("file",file.files[0]);
    axios.post("/file",formData,{
      headers:{"Content-Type":"multipart/form-data"},
    })
        .then(res=>{
          form.value.iconUrl=res.data
          console.log(res.data)
          console.log(form.value)
          add()
        })
        .catch(err=>console.log(err))
  } else {
    add()
  }
  console.log(form.value)
  dialogFormVisibleAdd.value=false;
}

//修改类型信息
const update=()=>{
  for (const type of typeArr1.value) {
    if (type.name===form.value.parentName){
      form.value.parentTypeId=type.typeId
    }
  }
  axios.put("/coursetype",form.value,{
    headers:{"Content-Type":"application/x-www-form-urlencoded"}
  })
      .then(res=>{

        findAll()
        findParent()
        console.log(res.data)
      })
  console.log(form.value)
}
const changeCourseType1=(obj)=>{

  console.log(obj)
  str1.value="修改类型信息"
  form.value=obj;
  dialogFormVisibleAdd.value=true;
}
const changeCourseType2=()=>{

  let file=document.getElementById("tx");
  if (file.files.length>0){
    const formData=new FormData();
    formData.append("file",file.files[0]);
    axios.post("/file",formData,{
      headers:{"Content-Type":"multipart/form-data"},
    })
        .then(res=>{
          form.value.iconUrl=res.data
          console.log(res.data)
          console.log(form.value)
          update()
        })
        .catch(err=>console.log(err))
  }else {
    update()
  }


  dialogFormVisibleAdd.value=false;
}

//删除购买记录
const deleteCourseType1=(typId)=>{
  str3.value="确定删除该条数据吗?"
  num.value=typId;
  dialogFormVisibleDel.value=true;
}
const deleteCourseType2=()=>{


  axios.delete("/coursetype",{
    params:{
      typeId:num.value
    }
  })
      .then(res=>{
        console.log(res.data)
        findAll()
        findParent()
      })
      .catch(err=>console.log(err))
  dialogFormVisibleDel.value=false;
}

// 批量删除购买记录
const deleteSelect1=()=>{
  str3.value="确定删除选中的所有数据吗?"
  dialogFormVisibleDel.value=true;
}
const deleteSelect2=()=>{

  axios.delete("/coursetype/select",{
    data:numArr.value
  })
      .then(res=>{
        console.log(res.data)
        findAll()
        findParent()
      })
      .catch(err=>console.log(err))
  dialogFormVisibleDel.value=false;
}

//模糊查询
const search=()=>{

  findAll()
}

//重置搜索
const resetSearch=()=>{

  name.value=null
  parentName.value=null
  findAll()

}

// 查找所有课程信息
const findAll=()=>{
  axios.get("/coursetype",{
    params:{
      name:name.value,
      parentName:parentName.value
    }
  })
      .then(res=>{
        console.log(res.data)
        tableData.value = res.data.data
        for (const coursetype of res.data.data) {
          iconArr.value[coursetype.typeId]=coursetype.iconUrl
        }
        console.log(iconArr.value)
      })
      .catch(err=>{
        console.log(err)
      })
}

//查找所有一级类型
const findParent=()=>{
  axios.get("/coursetype/parent")
      .then(res=>{
        console.log(res.data)
        typeArr1.value = res.data.data
      })

      .catch(err=>{console.log(err)})
}

// 动态展示选中的数据数组
const liveShow=(selection)=>{
  numArr.value=[]
  for (const s of selection) {
    numArr.value.push(s.typeId)
  }
  console.log(selection)
  console.log(numArr.value)
}

// 上传文件
const uploadImage=()=>{
  let file=document.getElementById("tx");
  const formData=new FormData();
  formData.append("file",file.files[0]);
  axios.post("/file",formData,{
    headers:{"Content-Type":"multipart/form-data"},
  })
      .then(res=>{
        form.value.iconUrl=res.data
        console.log(res.data)
        console.log(form.value)
      })
      .catch(err=>console.log(err))
}



onMounted(()=>{

  findAll()
  findParent()
})
onUpdated(()=>{

})

</script>

<template>


  <div class="top">

    类型名称 <el-input v-model="name" style="width: 240px" placeholder="请输入类型名称" />

    父类型名称 <el-select v-model="parentName" placeholder="选择状态" style="width: 240px">
    <el-option v-for="(value,index) in typeArr1" :key="index" :label="value.name" :value="value.name"/>
  </el-select>


    <el-button type="primary" style="margin-left: 20px" @click="search" :icon="Search">搜索</el-button>

    <el-button type="warning" style="margin-left: 20px" @click="resetSearch" :icon="Refresh">重置</el-button>
  </div>


  <div class="table">

    <div class="tar">
      <el-button type="primary" plain @click="addCourseType1">添加</el-button>
      <el-button type="danger" plain @click="deleteSelect1">批量删除</el-button>
    </div>

    <el-table :data="tableData" @selection-change="liveShow" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column property="typeId" label="类型编号" />
      <el-table-column property="name" label="类型名称"  />
      <el-table-column property="" label="类型图片"  >
        <template #default="scope">
          <img :src="iconArr[scope.row.typeId]" alt="" width="100px" height="100px">
        </template>
      </el-table-column>
      <el-table-column property="parentName" label="父类型名称"  />
      <el-table-column property="" label="操作" width="180" >
        <template #default="scope">
          <el-button type="warning" round @click="changeCourseType1(scope.row)">修改</el-button>
          <el-button type="danger" round @click="deleteCourseType1(scope.row.typeId)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>

    <!--    添加和修改类型记录-->
    <el-dialog v-model="dialogFormVisibleAdd" :title="str1" width="500">
      <el-form :model="form">
        <el-form-item label="类型名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="类型图片" :label-width="formLabelWidth">
          <input type="file" id="tx">
        </el-form-item>
        <!--      状态下拉框-->

        <el-form-item label="父类型名称" :label-width="formLabelWidth">
          <el-select v-model="form.parentName" placeholder="请选择父类型" >
            <el-option v-for="(value,index) in typeArr1" :key="index" :label="value.name" :value="value.name" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisibleAdd= false">取消</el-button>
          <el-button type="primary" @click="(str1===str2)?addCourseType2():changeCourseType2()">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogFormVisibleDel" title="删除信息" width="500" draggable>
      <span>{{str3}}</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisibleDel = false">取消</el-button>
          <el-button type="primary" @click="(str3===str4)?deleteCourseType2():deleteSelect2()">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>


  </div>

</template>

<style scoped>
.top{
  padding: 20px 0;
  margin:0 20px;
}

.table{
  padding: 20px 0;
  margin: 0 20px;
}

.tar{
  margin-bottom: 30px;
}


</style>